<html>
<head>
	<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>	
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">	
	<style>
		body {margin:20px;}
		h1 {text-align:center;}
		.team-row { margin-top:0px;}
		.testname {padding:5px;line-height: 2em; cursor: pointer}
		.failed {background-color: #FDD;}
		.passed {background-color: #DFD;}
		.unknown {background-color: #EEE;}
		.tile {text-align:center}
		.table td {padding:0.25rem;}
		.table th {
			height: 150px;
			font-weight: 100;
			vertical-align: bottom;
			text-align: left;
			max-width: 50px;
			overflow-x: visible;
			font-size: 8pt;
			transform: rotate(-45deg);
			transform-origin: 25px 125px 0;
		}
	</style>
</head>
<body>
	<!--h1>Bowling Game Kata</h1-->
	<div id="container" />

<script>
	let getAllTestNames = function(res){
		let testNames = {}
		for(let name in res){
			for(let test of res[name].tests)
				testNames[test.TestName] = 1;
		}
		return Object.keys(testNames).sort();
	}
	
	let findStatus = function(tests, testName){
		for(let t of tests)
			if (t.TestName == testName) return t;
		return null;
	}

	function buildDateKey() {
		var now = new Date();
		var day = ("0" + now.getDate()).slice(-2);
		var month = ("0" + (now.getMonth() + 1)).slice(-2);
		var year = now.getFullYear();
		return year + month + day;
	}
	
	var realm = "exceptions";
	var dateKey = buildDateKey();
	var fb = new Firebase(
		"https://testing-challenge.firebaseio.com/" + realm + "/" + dateKey);
	fb.on("value", function(snapshot) {
		var res = snapshot.val();
		var testNames = getAllTestNames(res);
		for(let name in res){
			res[name].columns = testNames.map(tn => findStatus(res[name].tests, tn))
		}
		var html = "<table class='table'>";
		html += "<tr><th></th>";
		testNames.forEach(function(tn){
			html += '<th>' + tn + '</th>';
		});
		html += "</tr>";
		var names = Object.keys(res);
		names.sort((a,b) => compareTestsSets(res[a].tests, res[b].tests));
		
		names.forEach(function(name){
			html += "<tr><td class='name'>" + htmlEscape(name) + "</td>";
			res[name].columns.forEach(t => html += formatTest(t));
			html += "</tr>";
		});
		html += "</table>";
		document.getElementById("container").innerHTML = html;
	});
	
	function compareTestsSets(set1, set2){
		// -1, если количество PASSED у set1 больше, чем set2 
		// -1, если количество PASSED одинаково, но последний запуск у set1 позже set2 
		let res = set2.filter(t => t.Succeeded).length - set1.filter(t => t.Succeeded).length;
		if (res != 0) return res;
		res = set2.length - set1.length;
		if (res != 0) return res;
		return set2[0].LastRunTime > set1[0].LastRunTime ? 1 : -1;
	}
	
	function htmlEscape(str) {
		return str
			.replace(/&/g, '&amp;')
			.replace(/"/g, '&quot;')
			.replace(/'/g, '&#39;')
			.replace(/</g, '')
        .replace(/>/g, '');
}
	
	function formatTest(test){
		if (test == null) return "<td class='testname unknown'></td>";
		let symbol = test.Succeeded ? "+" : "";
		
		return "<td title='" + test.TestName + "' class='testname " + 
		(test.Succeeded ? "passed" : "failed") +" tile'>" 
		+ symbol + "</span> "; 
	}
</script>
</body>
</html>
